<template>
  <el-container>
    <el-header>
      <div>
        <span class="project_name">点餐后台系统</span>
      </div>
      <div>
        <el-popover
          placement="top-start"
          title="最新订单"
          width="420"
          trigger="hover"
        >
          <div
            v-show="messageList.length"
            v-for="item in messageList"
            :key="item.id"
          >
            <p class="cp">
              订单号：<span @click="myrouter(item)" style="color: #409eff">{{
                item.orderNo
              }}</span>
              在<span @click="myrouter(item)" style="color: #409eff">{{
                item.payTime.split(" ")[1]
              }}</span
              >下单<span
                @click="myrouter(item)"
                style="color: #409eff"
                v-if="item.table"
                >({{ item.table.name }})</span
              ><i class="el-icon-circle-close cp" @click="del(item)"></i>
            </p>
          </div>
          <div v-show="!messageList.length" style="text-align: center">空</div>
          <el-badge slot="reference" :value="messageList.length" :max="99">
            <i style="color: #fff" class="el-icon-bell"></i>
          </el-badge>
        </el-popover>

        <el-popover
          style="margin-left: 30px"
          placement="bottom"
          width="150"
          trigger="click"
        >
          <div class="flex" slot="reference">
            <span class="cp" style="color: white; margin-right: 20px">{{
              userinfo.nickName
            }}</span>

            <img class="cp" :src="userinfo.imgUrl" alt="" />
          </div>
          <el-button
            style="text-align: center"
            type="text"
            size="default"
            @click="exit"
            >退出登录</el-button
          >
        </el-popover>
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto">
        <Aside />
      </el-aside>
      <el-main :class="$route.path == '/reports' ? 'p' : ''">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      userinfo: {
        imgUrl: "",
      },
      messageList: [],
      show: true,
    };
  },
  created() {
    const storedData = localStorage.getItem("msg");
    if (storedData) {
      this.messageList = JSON.parse(storedData);
    }
  },
  watch: {
    messageList: {
      deep: true,
      handler(newData) {
        // 将数据保存到本地存储中
        localStorage.setItem("msg", JSON.stringify(newData));
      },
    },
  },
  mounted() {
    const socket = new WebSocket("ws://8.138.102.145:8008");
    socket.onopen = function () {
      console.log("连接成功");
    };
    let that = this;
    socket.onmessage = function (event) {
      const message = event.data;
      if (message == "连接成功") {
        return;
      }
      that.$nextTick(() => {
        that.messageList.push(JSON.parse(message));
      });
    };
    this.$http.get("/auth/userinfo").then((res) => {
      this.userinfo = res.data;
      this.userinfo.imgUrl =
        "http://8.138.102.145:8232/images/" + res.data.avatar;
    });
  },
  methods: {
    async exit() {
      this.$http.post("/auth/logout").then((res) => {
        window.sessionStorage.removeItem("token");
        this.$router.push("/login");
      });
    },
    del(item) {
      this.messageList = this.messageList.filter((v) => v.id !== item.id);
    },
    myrouter(item) {
      this.$router.push({ path: "/orders" });
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #071b40;
    div {
      display: flex;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
      }
      .project_name {
        font-size: 24px;
        color: #e0e8e8;
      }
    }
  }
  .el-aside {
    background-color: #071b40;
  }
  .el-main {
    background-color: #e9edf1;
  }
}
.cp {
  cursor: pointer;
}
.p {
  padding: 0px;
}
</style>
